<template>
    <a-spin :spinning="spinning">
        <template v-if="row">
            <div class="top">
                <div class="left">
                    <div class="title">{{ row.row.name }}</div>
                    <div class="ex">{{ row.row.minSalary }}-{{ row.row.maxSalary }}K | {{ row.experienceText }} | {{ row.degreeText }}</div>
                </div>
            </div>
            <div class="blank"></div>

            <div class="module">
                <div class="moduleTitle">职位描述</div>
                <div class="content">{{ row.row.content }}</div>
            </div>

            <div class="module">
                <div class="moduleTitle">公司信息</div>
                <div class="content">名称：{{company.name}}</div>
                <div class="content">地址：{{company.address}}</div>
            </div>
            <div class="module">
                <div class="moduleTitle">公司介绍</div>
                
                <div class="content"> {{company.content}}</div>
            </div>
        </template>
    </a-spin>
</template>

<script lang="ts" setup>
import { companyinfobyIdApi, detailApi } from '@/api/Zhaopin';
import { ref } from 'vue';

    const props = defineProps<{
        row : any;
    }>()

    const spinning = ref(true)

    const company = ref<any>({})
    const row = ref<any>()


    detailApi(props.row.id).then(r => {
        

        row.value = r.data
        spinning.value = false

        companyinfobyIdApi(r.data.row.userId).then(r => {
            if(r.data) {
                company.value = r.data
            }
        })
    })
</script>

<style lang="scss" scoped>

.top{
    display: flex;
    align-items: center;
    .left{
        flex: 1;
    }
}

.right{
    display: flex;
    align-items: center;
}


.blank{
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    margin: 20px auto;
}

.title{
    font-weight: 500;
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
}

.ex{
    font-weight: 400;
    font-size: 14px;
    color: rgba(85, 85, 85, 1);
    margin-top: 15px;
}

.module{
    margin-top: 20px;
    &:first-of-type{
        margin-top: 0;
    }
    
    .moduleTitle{
        font-weight: 500;
        font-size: 18px;
        color: #000;
    }

    .content{
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        margin-top: 8px;
        color: rgba(48, 49, 51, 1);
        
    }
}

.amount{
    font-size: 24px;
    color: red;
    font-weight: bold;
}
    
</style>